import React, { useEffect } from 'react';
//访客男女性别分布比例图
import * as echarts from 'echarts';
import '../sacc/Annular.scss'
const Annular = () => {
    useEffect(() => {
        var option = echarts.init(document.getElementById('ann') || document.body);
        option.setOption({
            title: {
                text: '访客男女性别分布比例图'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center',
            },
            series: [
                {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    data: [
                        { value: 735, name: '男性' },
                        { value: 1048, name: '女性' },
                        { value: 580, name: '未知' },
                    ],

                }
            ]
        })
    }, [])
    return (
        <div>
            <div id='ann'></div>
        </div>
    );
};

export default Annular;